<template>
  <div>
    <div id="div1">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="year" placeholder="年度"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="area" placeholder="xx区"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="specialTechnologySeries"
            placeholder="专业技术系列"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="declarationQualificationMajor" placeholder="资格专业"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="nameOfSpecialSkillDeclaration"
            placeholder="专业技术资格名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="get()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <!-- 导出报表@click="outTab" -->
          <el-button type="primary" @click="handleExport">导出报表</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="div2">
      <p>共查询到职称申报通过人数信息{{total}}条</p>
      <el-table
        id="exportTable"
        :data="tableData"
        border
        style="width: 95%; height: 70%"
        :header-cell-style="{ background: '#f3f3f3' }"
      >
        <el-table-column prop="pid" label="编号" width="60">
        </el-table-column>
        <el-table-column prop="sponsorInformation" label="人员信息">
        </el-table-column>
        <el-table-column prop="gender" label="性别" width="60"> </el-table-column>
        <el-table-column prop="staff.unit" label="所在单位"> </el-table-column>
        <el-table-column prop="staff.industry" label="单位性质"> </el-table-column>
        <el-table-column prop="specialTechnologySeries" label="专业技术系列"> </el-table-column>
        <el-table-column prop="declarationQualificationMajor" label="资格专业"> </el-table-column>
        <el-table-column prop="nameOfSpecialSkillDeclaration" label="专业技术资格名称"> </el-table-column>
      </el-table>
      <el-pagination
      background
      layout="prev, pager, next"
      :page-size="limit"
      :total="total"
      @current-change="change"
      @prev-click="prev"
      @next-click="next"
    >
    </el-pagination>
    </div>
  </div>
</template>
<script>
import XLSX from "xlsx";
export default {
  data: function () {
    return {
      page: 1,
      limit: 5,
      total: 3,
      tableData: [
        {
          pid: "",
          sponsorInformation: "",
          gender: "",
          unit: "",
          industry: "",
          specialTechnologySeries: "",
          declarationQualificationMajor: "",
          nameOfSpecialSkillDeclaration: "",
        },
      ],

      year: "",
      area: "",
      specialTechnologySeries: "",
      declarationQualificationMajor: "",
      nameOfSpecialSkillDeclaration: "",
    };
  },
  methods: {
    //查询
    get() {
      this.$axios({
        url: "/PTDF/throughPersonnel",
        method: "post",
        data: {
          year: this.year,
          area: this.area,
          specialTechnologySeries: this.specialTechnologySeries,
          declarationQualificationMajor: this.declarationQualificationMajor,
          nameOfSpecialSkillDeclaration: this.nameOfSpecialSkillDeclaration,
        },
      }).then((res) => {
        this.tableData = res.data.data;
      });
    },
    //页面渲染和页码
    getCon() {
      this.$axios({
        url: "/PTDF/throughPersonnel",
        method: "post",
        data: {
          page: this.page,
          limit: this.limit,
        },
      }).then((res) => {
        console.log(res.data.data);
        this.tableData = res.data.data;
      });
    },
    change(page) {
      this.page = page;
      this.getCon();
    },
    prev() {
      this.page--;
      this.getCon();
    },
    next() {
      this.page++;
      this.getCon();
    },

    //导出报表
    handleExport() {
      this.$confirm("该操作将导出选中的列表数据，是否继续", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //导出
          let table = document.getElementById("exportTable");
          let worksheet = XLSX.utils.table_to_sheet(table);
          let workbook = XLSX.utils.book_new();
          XLSX.utils.book_append_sheet(workbook, worksheet, "sheet");
          try {
            XLSX.writeFile(workbook, "通过人员报表.xlsx");
          } catch (e) {
            console.log(e, workbook);
          }
        })
        .catch(() => {});
    },
  },
  mounted() {
    this.getCon();
    sessionStorage.setItem("fName", "Through");
  },
};
</script>
<style lang="less" scoped>
.el-pagination {
  margin-top: 20px;
  float: right;
}
#div1 {
  width: 90%;
  height: 60px;
  background: #f7f7f7;
  .el-form-item {
    padding: 10px 10px;
    .el-input {
      width: 150px;
      height: 34px;
      line-height: 34px;
    }
  }
}
#div2 {
  width: 90%;
  height: 500px;
  margin-top: 30px;
  background: #f7f7f7;
  p {
    color: red;
    font-size: 12px;
    margin-left: 24px;
    height: 50px;
    line-height: 50px;
    button {
      float: right;
      margin: 15px 30px 15px 0;
    }
  }
  .el-table {
    width: 95%;
    margin: auto;
    // .el-table td, .el-table th{
    //   text-align: center !important;
    // }
  }
}
</style>